<script>
import { computed, defineComponent, reactive, ref } from 'vue'
import { authPermissionAll } from '@Config/server/api'
import * as Antd from 'ant-design-vue'
import { findIndex, groupBy } from 'lodash'
import { TeamOutlined, BranchesOutlined } from '@ant-design/icons-vue'
import { confirm } from '@Config/config'
export default defineComponent({
  props: {
    record: {
      type: Object,
      default: () => {
        return null
      },
    },
  },
  emits: ['close', 'result'],
  components: {
    TeamOutlined,
    BranchesOutlined,
  },
  setup(props, context) {
    let list = reactive({
      data: [],
    })

    let record = computed(() => {
      return props.record
    })
    let selected_power = reactive({ data: [] })

    //上次设置的权限
    selected_power.data = record.value?.rolePermissionList.map(
      (x) => x.permissionId
    )
    //获取所有的权限列表
    authPermissionAll().then((x) => {
      list.data = x.data.map((xx) => {
        xx.value = xx.tag
        xx.label = xx.name
        return xx
      })
    })

    let indeterminate = computed(() => {
      return (
        selected_power.data.length != list.data.length &&
        selected_power.data.length > 0
      )
    })
    let checkedAll = computed(() => {
      return selected_power.data.length == list.data.length
    })
    let checkAllHandler = (e) => {
      if (e.target.checked) {
        //全选
        selected_power.data = list.data.map((x) => x.value)
      } else {
        selected_power.data = []

        //全不选
      }
    }
    //关闭弹出窗口
    let cancelHandler = () => {
      context.emit('close')
    }

    let loading = ref()

    //确定按钮
    let submitHandler = () => {
      let _r = selected_power.data.map((x) => {
        let _index = findIndex(list.data, { tag: x })
        return { ...list.data[_index] }
      })

      let has_default = findIndex(_r, { canBeIndex: true })

      if (has_default < 0 && selected_power.data.length > 0) {
        confirm({
          title: '权限配置是必须选择一个默认首页',
        })
        return
      }

      loading.value = true
      context.emit('result', {
        powerList: _r,
        record: props.record,
        innerCallBack: (_result) => {
          loading.value = false
          if (_result.code == 0) {
            context.emit('close')
          }
        },
      })
    }

    let groupList = computed(() => {
      let _c = groupBy(list.data, 'groupTagName')
      let g = []
      for (var prop in _c) {
        g.push(_c[prop])
      }
      return g
    })

    let blockClickHandler = (_list) => {
      let unAdd = _list
        .map((x) => {
          let _index = selected_power.data.indexOf(x.value)
          if (_index < 0) {
            return x
          } else {
            return null
          }
        })
        .filter((x) => x)

      //当点击按钮时，如果有未添加的，就把未添加加到已选权限里面

      if (unAdd.length > 0) {
        unAdd.map((x) => {
          selected_power.data.push(x.value)
        })
      }
      //已全部添加状态，点击按钮，这个时候就要删除全部
      if (unAdd.length == 0) {
        _list.map((x) => {
          let _index = selected_power.data.indexOf(x.value)

          selected_power.data.splice(_index, 1)
        })
      }
    }

    return {
      list,
      selected_power,
      indeterminate,
      checkedAll,
      checkAllHandler,
      cancelHandler,
      submitHandler,
      loading,
      groupList,
      blockClickHandler,
    }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24} class="red">
          <BranchesOutlined class="ant-statistic-title" />
          默认首页(必选一项)
        </Antd.Col>
        <Antd.Col span={24}>
          <Antd.Checkbox
            indeterminate={this.indeterminate}
            checked={this.checkedAll}
            onChange={(e) => {
              this.checkAllHandler(e)
            }}
          >
            全选/反选
          </Antd.Checkbox>

          {this.selected_power.data.length > 0 && (
            <span>
              已设置<b class="red">{this.selected_power.data.length}</b>项权限
            </span>
          )}
        </Antd.Col>
        <Antd.Col span={24}>
          <Antd.CheckboxGroup
            value={this.selected_power.data}
            onChange={(e) => {
              this.selected_power.data = e
            }}
          >
            {this.groupList.map((x) => {
              return (
                <div style={{ 'margin-bottom': '20px' }}>
                  <div style={{ 'margin-bottom': '10px' }}>
                    <Antd.Space>
                      <TeamOutlined />
                      <Antd.Button
                        type="link"
                        size="small"
                        onClick={() => {
                          this.blockClickHandler(x)
                        }}
                      >
                        {x[0]?.groupTagName}
                      </Antd.Button>
                    </Antd.Space>
                  </div>

                  <div>
                    {x.map((xx) => {
                      return (
                        <Antd.Checkbox value={xx.value}>
                          {xx.label}
                          {xx.canBeIndex && (
                            <BranchesOutlined
                              class="ant-statistic-title"
                              title="是否可以当首页"
                            />
                          )}
                        </Antd.Checkbox>
                      )
                    })}
                  </div>
                </div>
              )
            })}
          </Antd.CheckboxGroup>
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={this.submitHandler}
              loading={this.loading}
            >
              确定
            </Antd.Button>
            <Antd.Button
              type="primary"
              danger
              onClick={this.cancelHandler}
              loading={this.loading}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>

<style scoped>
:deep() .ant-checkbox-wrapper.ant-checkbox-group-item {
  margin: 10px;
}
:deep().ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
